<template>
  <div id="mapContainer"></div>
  <ManageBaseMapPanel
    :show="showBaseMapPanel"
    :baseMaps="baseMaps"
    placement="bottom"
    @close="handleCloseBaseMapPanel"
    @pickBaseMap="hanlePickBaseMap">
    <button
      style="
        position: fixed;
        top: 500px;
        left: 500px;
        zindex: 99;
        width: 100px;
        height: 30px;
      "
      @click="showBaseMapPanel = !showBaseMapPanel">
      选择底图
    </button>
  </ManageBaseMapPanel>
</template>
<script setup>
import { Map, View } from "ol";
import { fromLonLat, get } from "ol/proj";

import { onMounted, nextTick, ref } from "vue";

import { tdt_api_key /** 天地图的key */ } from "@/config/keys.json";
import { addTdtBaseLayer } from "@/utils/baseMap.js";
import {
  getLayers,
  getLayerByName,
  findLayer,
  removeLayerBy,
  addLayers,
} from "@/utils/layer.js";

import ManageBaseMapPanel from "@/components/ManageBaseMapPanel.vue";

function initMap() {
  const map = new Map({
    view: new View({
      // projection: "EPSG:4326",
      // center: [114.5, 31],
      // center: [12744384.64, 3632718.39],
      center: fromLonLat([114.5, 31]),
      zoom: 9,
    }),
    target: "mapContainer",
  });

  // 加载底图
  addTdtBaseLayer(map, tdt_api_key, "img", "w", "wmts");

  // const projection = map.getView().getProjection();
  // console.log(map.getView().getProperties());
  // console.log(projection.getCode());
  // setProjection(map, "EPSG:4326");

  window.map = map;
}

onMounted(() => {
  nextTick(() => {
    initMap();
  });
});

//显示地图切换面板
const showBaseMapPanel = ref(false);
//
const baseMaps = ref([
  {
    id: "tdt_img_w",
    name: "天地图影像(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_img.png",
    default: true,
  },
  {
    id: "tdt_vec_w",
    name: "天地图矢量(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_vec.png",
  },
  {
    id: "tdt_ter_w",
    name: "天地图地形(EPSG:3857)",
    image: "/src/assets/images/baseMapPanel/tdt_ter.png",
  },
  {
    id: "tdt_img_c",
    name: "天地图影像(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_img.png",
  },
  {
    id: "tdt_vec_c",
    name: "天地图矢量(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_vec.png",
  },
  {
    id: "tdt_ter_c",
    name: "天地图地形(EPSG:4326)",
    image: "/src/assets/images/baseMapPanel/tdt_ter.png",
  },
]);

function handleCloseBaseMapPanel(item) {
  showBaseMapPanel.value = false;
  toolbarConfig.value.find(el => el.id == "baseMap").active = false;
}

// 地图选择事件的回调
function hanlePickBaseMap(newItem, oldItem) {
  if (oldItem) {
    const layerId = oldItem.id;
    const markerId = layerId.replace(
      /(?<=tdt_)(\w+)(?=_[c|w])/,
      `c${layerId.split("_")[1].charAt(0)}a`
    );

    removeLayerBy(
      window.map,
      layer => layer.id == layerId || layer.id == markerId
    );
  }

  // 加载新图层
  addTdtBaseLayer(
    window.map,
    tdt_api_key,
    newItem.id.split("_")[1],
    newItem.id.split("_")[2]
  );
}
</script>

<style scoped>
#mapContainer {
  width: 100%;
  height: 99vh;
}
</style>
